<template>
	<Container>
		<view class="header">
			<image
				class="image"
				v-if="imgIsShow"
				:src="
					'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' +
						(assignment.optionArticles[current].shapeText ? encodeURI(assignment.optionArticles[current].shapeText) : '方形') +
						'.png'
				"
				mode="aspectFit"
				:style="{ filter: color[assignment.optionArticles[current].colorText] }"
			></image>
		<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="questionWord" />
		<Record class="record" ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import { guide } from '../../../common/mixins/assignmentGuide.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	mixins: [mixins, guide],
	components: { AudioIcon, Question, Container, Record },
	data() {
		return {
			current: 0,
			imgIsShow: true,
			audioUrl: '',
			color: this.config.shapeColor
		}
	},
	methods: {
		questionPlay: async function() {
			const data = await this.parseTextAudio({
				text: this.assignment.questionName,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
					this.guidePress = false
				},
				end: () => {
					this.guidePlay()
				}
			})
		},
		guidePlay: async function() {
			const data = await this.parseTextAudio({
				text: this.assignment.guide,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = false
					this.guidePress = true
				}
			})
		},
		recordFinish: function(audioData) {
			if (this.current === this.assignment.optionArticles.length - 1) {
				const isSure = this.choosesKey.every(item => {
					return item
				})
				this.$parent.next({
					isSure: isSure,
					audioUrl: this.audioUrl
				})
			} else {
				this.choosesKey.push(audioData.isAudioWithTexts)
				this.audioUrl = this.audioUrl ? this.audioUrl + ',' + audioData.audioUrl : this.audioUrl + audioData.audioUrl
				this.current++
				this.guidePlay()
				this.imgIsShow = false
				this.$refs.audio.initStatus()
				setTimeout(() => {
					this.imgIsShow = true
				}, 0)
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	justify-content center
	align-items center
	position relative
	.image
		width 75%
		height 75%
		animation outIn 0.3s
</style>
